<template>
    <div class="fix-bottom white-bg">
        <div>
            <span class="text-small">需支付 &emsp;</span>
            <span class="text-giant color-red">¥{{priceText}}</span>
        </div>
        <div class="btn text-normal btn-mobile btn-block btn-white-red" v-if="isBalance == 1" :class="{ 'disabled': isBalance }" @click="onClickPay('balance','1')">
            余额支付
        </div>
        <div class="btn text-normal btn-mobile btn-block btn-white-red" :class="{ 'disabled': isPaying }" @click="onClickPay('cash','0')">
            支付订单
        </div>
    </div>
</template>

<script>
import {
    currency,
} from '@/lib/utils';

export default {
    name: 'OrderPriceBar',
    props: {
        /** 价格 */
        price: {
            type: Number,
        },
        isBalance:{
            type:Number
        },
        isPaying: {
            type: Boolean,
            default: false,
        },
    },
    computed: {
        priceText() {
            return currency(this.price);
        },
    },
    methods: {
        /**
         * 点击支付
         */
        onClickPay(_ispay,_payType) {
            this.$emit('pay',_ispay,_payType);
        },
    },
};
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.fix-bottom {
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50px;
    padding: 0 15px;
    z-index: 2;
    .btn {
        width: 107px;
        height: 30px;
        line-height: 30px;
        border-radius: 40rpx;
    }
}
</style>
